<template>
  <div class="singerUsers" v-if="singerusersList">
    <template v-for="item in singerusersList">
      <div class="dynamicBox" :key="item.userId">
        <!-- 内容 -->
        <div class="dynamicContent">
          <!-- 头像 -->
          <div class="headImg">
            <div class="head">
              <img :src="item.avatarUrl" />
            </div>
            <span v-if="item.vipType==0">v</span>
          </div>
          <!-- 头像 end-->
          <div class="dynamicContent_top">
            <div class="title">
              <span class="name">{{item.nickname}}</span>

              <p v-if="item.description">{{item.description}}</p>
              <p v-else>{{item.signature}}</p>
            </div>
          </div>
        </div>
        <div class="btn">
          <span>+</span>关注
        </div>
        <!-- 内容 end-->
      </div>
    </template>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["singerName"],
  data() {
    return {
      singerusersList: ""
    };
  },
  watch: {
    singerName: function() {
      this.$http("/search", {
        params: {
          keywords: this.singerName,
          type: 1002
        }
      }).then(res => {
        console.log(res);
        this.singerusersList = res.data.result.userprofiles;
      });
    }
  },
  computed: {},
  methods: {},
  created() {
    this.$http("/search", {
      params: {
        keywords: this.singerName,
        type: 1002
      }
    }).then(res => {
      console.log(res);
      this.singerusersList = res.data.result.userprofiles;
    });
  },
  mounted() {
    console.log(this.singerusersList);
  }
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.singerUsers {
  .dynamicBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(20) vw(20) 0;
    .dynamicContent {
      width: 70%;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .headImg {
        width: vw(50);
        position: relative;

        .head {
          width: vw(40);
          height: vw(40);
          border-radius: 50%;
          overflow: hidden;

          img {
            width: 100%;
          }
        }
        span {
          position: absolute;
          bottom: 0;
          right: 0;
          display: block;
          width: vw(15);
          height: vw(15);
          line-height: vw(15);
          text-align: center;
          background: #f00;
          color: #fff;
          border-radius: 50%;
          font-size: vw(14);
        }
      }
      .dynamicContent_top {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        padding-left: vw(10);
        .title {
          .name {
            color: deepskyblue;
            padding-right: vw(6);
          }
          p {
            width: vw(200);
            font-size: vw(12);
            color: #666;
            padding-top: vw(4);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .btn {
      width: vw(60);
      height: vw(24);
      line-height: vw(22);
      text-align: center;
      border: vw(1) solid #f00;
      border-radius: vw(20);
      color: #f00;
      font-size: vw(10);
    }
  }
}
</style>